<template>
    <!-- active 当前激活菜单  从store中获取，实现标签页与菜单导航交互 -->
    <el-menu :default-active=defaultActive class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
        active-text-color="#ffd04b">

        <!-- 使用router-link绑定菜单的路由 -->
        <router-link to="/index">
            <el-menu-item index="Index" @click="selectMenu({ name: 'Index' })">
                <template #title>
                    <el-icon>
                        <!-- <component :is="iconName" /> -->
                        <HomeFilled />
                    </el-icon>
                    <span slot="title">首页</span>
                </template>
            </el-menu-item>
        </router-link>

        <el-sub-menu :index="menu.name" v-for="menu in menuList">

            <template #title>
                <el-icon>
                    <!-- <Operation /> -->
                    <component :is="menu.icon" />
                </el-icon>
                <span>{{ menu.title }}</span>
            </template>

            <!-- 使用router-link绑定菜单的路由 -->
            <router-link :to="item.path" v-for="item in menu.children">
                <!-- 子标签添加一个点击事件 传入一个菜单对象 -->
                <el-menu-item :index="item.name" @click="selectMenu(item)">
                    <el-icon>
                        <component :is="item.icon" />
                    </el-icon>
                    <span>{{ item.title }}</span>
                </el-menu-item>
            </router-link>
        </el-sub-menu>
    </el-menu>
</template>

<script setup lang="ts">
import { computed } from 'vue';
// 引入状态管理
import { useStore } from 'vuex';

/**
 * 我们使用了 useStore 函数来获取 Vuex store。
 */
const store = useStore();
/**
 * 直接使用不能实现动态的监控，数据的加载在页面渲染之后
 * 因此需要使用计算属性 computed 来监听 store.state.menus.menuList 的变化
 */
const menuList = computed(() => store.state.menus.menuList);
const defaultActive = computed(() => store.state.menus.editableTabsValue);

// 点击菜单添加到标签页中
function selectMenu(item: any) {
    store.commit('addTab', item);
}
</script>

<style scoped>
/* 菜单栏部分 */
.el-menu-vertical-demo {
    /* 撑满整个菜单块部分 */
    height: 100%;
}

/* 去掉隐约的下划线 */
a {
    text-decoration: none;
}
</style>